<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12">
        <div class="input_form">
          <el-form :model="loginForm" :rules="rules">
            <h1>HELLO</h1>
            <h2>欢迎登录商品管理系统后台</h2>
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" :prefix-icon="User"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" type="password" :prefix-icon="Lock" show-password></el-input>
            </el-form-item>
            <el-form-item></el-form-item>
            <el-button id="login_button" type="primary" :loading="loading" @click="login">登录</el-button>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import useUserStore from '@/store/modules/user.ts'
// 引入vue-router用于导航
import { useRouter,useRoute } from 'vue-router'
import { getTime } from '@/utils/time.ts'
const loginForm = reactive({
  username: 'admin',
  password: '111111'
})
let loading = ref(false)
let userStore = useUserStore()
// 创建vue-router实例对象，然后使用该实例对象进行导航
let $router = useRouter()
let $route=useRoute()
// 自定义表单验证
const validateUsername = (rule, value, callback) => {
  if (value.length >= 5) {
    callback();
  } else {
    callback(new Error('输入账号至少为5位'));
  }
}
const validatePassword = (rule, value, callback) => {
  if (value.length >= 6) {
    callback();
  } else {
    callback(new Error('输入密码至少位6位'));
  }
}
// 自定义表单验证
const rules = reactive({
  username: [
    // { required: true, message: '请输入账号', trigger: 'blur' },
    // { min: 6, max: 10, message: '输入的账号在5到10位之间', trigger: 'blur' }
    // 自定义正则校验规则
    { required: true, validator: validateUsername, trigger: 'change' }
  ],
  password: [
    // { required: true, message: '请输入密码', trigger: 'blur' }
    { required: true, validator: validatePassword, trigger: 'change' }
  ]
})
const login = async () => {
  try {
    loading.value = true
    await userStore.userLogin(loginForm)
    //编程式导航跳转到展示数据首页
    //判断登录的时候,路由路径当中是否有query参数，如果有就往query参数挑战，没有跳转到首页
    let redirect: any = $route.query.redirect;
    $router.push({ path: redirect || '/' });
    ElNotification({
      type: 'success',
      message: '登录成功',
      title: `Hi,${getTime()}好`
    })
    loading.value = false

  } catch (error) {
    loading.value = false
    ElNotification.error('账号或密码错误，登录失败')
  }

}
onBeforeMount(() => {

})
onMounted(() => {

})

</script>
<style lang="scss" scoped>
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;

  .input_form {
    background: url('@/assets/images/login_form.png') no-repeat;
    background-size: cover;
    // width: 300px;
    // height: 200px;
    position: relative;
    top: 35vh;
    right: 50px;
    padding: 40px;

    h1 {
      color: $text_white_color;
    }

    h2 {
      color: $text_white_color;
      margin: 20px 0px;
    }

    #login_button {
      width: 100%;
    }
  }
}
</style>